<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="css/login.css">
    <!-- 导入bootstrap样式-->
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="elementUI/elementCSS.css">
    <!--引入图标库-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!--引入element的图标库-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引入layui样式-->
    <link href="//cdn.staticfile.net/layui/2.9.11/css/layui.css" rel="stylesheet">
    <style>
        [v-cloak]{ display: none; }
    </style>
</head>
<body>
<div id="app" class="login-container">
    <div class="login-form" style="position: relative;">
        <h2>登录</h2>
        <form id="loginForm">
            <div class="input-group">
                <label for="username">用户名</label>
                <input type="text"  v-model="username" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">密码</label>
                <input type="password" v-model="password" id="password" name="password" required>
            </div>
            <button type="button" @click="login">登录</button>
        </form>
        <a href="/register.html"
           style=" color: rgb(141 0 0); font-size: 10px;text-decoration: underline;position: absolute; right: 10px;bottom: 10px;">没有账号？点此注册</a>
        <div id="error-message"></div>
        <a v-cloak v-if="showForgetPassword" href="/forgetPassword.html"
           style="color: rgb(141, 0, 0);font-size: 10px;text-decoration: underline;position: absolute;left: 10px;bottom: 10px;">忘记密码？</a>
    </div>
</div>
<script src="js/jquery-3.7.1.js"></script>
<script src="js/vue.js"></script>
<script src="elementUI/elementJS.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="//cdn.staticfile.net/layui/2.9.11/layui.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '123',
            password: '',
            showForgetPassword: false,// 忘记密码是否显示
            erroTime: 0,// 密码错误次数
        },
        //监听错误次数:
        watch: {
            erroTime: function (val) {
                console.log('密码错误次数:' + val);
                if (val >= 3) {
                    this.showForgetPassword = true;
                } else {
                    this.showForgetPassword = false;
                }
            }
        },
        methods: {
            login() {
                axios.post('/api/login', {
                    username: this.username,
                    password: this.password
                }).then(response => {
                    if (response.data.result) {
                        layer.msg('登录成功', {icon: 1, time: 1000, anim: 6});
                        setTimeout(() => {
                            location.href = '/';
                        }, 1000);
                    } else {
                        this.erroTime++;
                        layer.msg('用户名或密码错误', {icon: 2, time: 1000, anim: 6});
                    }
                }).catch(error => {
                    console.log(error);

                });
            }
        }
    })
</script>
</body>
</html>
